<template>
	<div class="demo">
		<div class="container">
			<slot name="view"></slot>
			<div class="code-switch" @click="showCode = !showCode">
				<gr-button flat :border="false" size="mini">
					<gr-icon name="arrow-left-bold" color="#999" size="14px"></gr-icon>
					<gr-icon name="arrow-right-bold" color="#999" size="14px"></gr-icon>
				</gr-button>
			</div>
		</div>
		<transition-slide>
			<div v-show="showCode" class="code-view">
				<code-view>
					<div v-if="$slots['code-html']" slot="code-html">
						<slot name="code-html"></slot>
					</div>
					<div v-if="$slots['code-css']" slot="code-css">
						<slot name="code-css"></slot>
					</div>
					<div v-if="$slots['code-js']" slot="code-js">
						<slot name="code-js"></slot>
					</div>
				</code-view>
			</div>
		</transition-slide>
	</div>
</template>

<script>
	import TransitionSlide from './animation/transitionSlide.vue'
	import CodeView from './CodeView.vue'
	export default {
		components: {
			'transition-slide' : TransitionSlide,
			'code-view' : CodeView
		},
		data() {
			return {
				showCode: false
			}
		},
		mounted() {
			// console.log(this.$slots['code-css']);
		}
	}
</script>

<style lang="scss" scoped>
	.demo {
		margin: 5px 0;
		.container {
			padding: 20px;
			background-color: #efefef;
			position: relative;
			.code-view {
				background-color: white;
				overflow: hidden;
			}
			.code-switch {
				position: absolute;
				right: 4px;
				bottom: 0px;
			}
		}
		
		.slide-enter-active {
			transition: 6s;
		}
		.slide-leave-active {
			transition: 6s;
		}
		
		.slide-enter,.slide-leave-to {
			height: 0;
		}
	}
</style>
